{% extends "common/base.html" %}

{% block title %}文件管理 - {{ block.Super }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12">
                <ol class="breadcrumb">
                    <li><a href="/">控制台</a></li>
                    <li class="active"><span>文件管理</span></li>
                </ol>
                <h1>文件管理</h1>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="main-box clearfix">
                    <header class="main-box-header clearfix">
                        <div class="pull-left">
                            <h2>文件列表</h2>

                            {% if path == "" %}
                                <div class="label label-default text-muted fs-path" id="fs-path" data-path="/">/</div>
                            {% else %}
                                <div class="label label-default text-muted fs-path" id="fs-path" data-path="{{ path }}">{{ path }}</div>
                            {% endif %}
                        </div>

                        <div class="filter-block pull-right">
                            <a href="javascript:;" class="btn btn-primary pull-right js-create-dir-btn">
                                <i class="fa fa-plus-circle fa-lg"></i> 创建文件夹
                            </a>
                            <a href="javascript:;" class="btn btn-primary pull-right js-create-file-btn">
                                <i class="fa fa-plus-circle fa-lg"></i> 创建文件
                            </a>
                            <a href="javascript:;" class="btn btn-warning pull-right js-upload-btn" data-path="{{ path }}">
                                <i class="fa fa-upload fa-lg"></i> 上传文件
                            </a>
                            <a href="javascript:;" class="btn btn-info pull-right js-refresh-btn">
                                <i class="fa fa-refresh fa-lg"></i> 刷新
                            </a>
                        </div>
                    </header>

                    <div class="main-box-body clearfix">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>
                                            <span>名称</span>
                                        </th>
                                        <th>
                                            <span>修改时间</span>
                                        </th>
                                        <th>
                                            <span>类型</span>
                                        </th>
                                        <th>
                                            <span>大小</span>
                                        </th>
                                        <th>
                                            <span>权限</span>
                                        </th>
                                        <th>
                                            <span>操作</span>
                                        </th>
                                    </tr>
                                </thead>

                                <tbody>
                                    {% if parentPath != "" %}
                                        <tr>
                                            <td class="sys-name" colspan="7" data-name="{{ parentPath }}">
                                                <i class="fa fa-folder-o"></i>

                                                <a href="/file/index?path={{ parentPath }}" title="返回上级">
                                                    ...
                                                </a>
                                            </td>
                                        </tr>
                                    {% endif %}

                                    {% for item in list %}
                                        <tr class="file-item-contextmenu" data-type="{{ item.type }}">
                                            <td class="sys-name">
                                                <i class="{{ faIcon(item.type) }}"></i>

                                                {% if item.isDir %}
                                                    <a href="/file/index?path={{ path }}/{{ item.namesmall }}" title="{{ item.namesmall }}">{{ item.namesmall }}</a>
                                                {% else %}
                                                    {{ item.namesmall }}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {{ item.time }}
                                            </td>
                                            <td>
                                                {{ item.type }}
                                            </td>
                                            <td>
                                                {% if item.isDir %}
                                                    -
                                                {% else %}
                                                    {{ formatSize(item.size) }}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {{ item.perm }}
                                            </td>
                                            <td style="width: 18%;">
                                                <a href="javascript:;"
                                                    class="table-link js-info-btn"
                                                    data-file="{{ path }}/{{ item.namesmall }}"
                                                    title="详情">
                                                    <span class="fa-stack">
                                                        <i class="fa fa-square fa-stack-2x"></i>
                                                        <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
                                                    </span>
                                                </a>

                                                {% if item.type == "image" || item.type == "audio" || item.type == "video" %}
                                                    <a href="javascript:;"
                                                        class="table-link js-preview-btn"
                                                        data-file="{{ path }}/{{ item.namesmall }}"
                                                        data-type="{{ item.type }}"
                                                        title="预览">
                                                        <span class="fa-stack">
                                                            <i class="fa fa-square fa-stack-2x"></i>
                                                            <i class="fa fa-eye fa-stack-1x fa-inverse"></i>
                                                        </span>
                                                    </a>
                                                {% endif %}

                                                {% if !item.isDir %}
                                                    <a href="javascript:;"
                                                        class="table-link js-update-btn"
                                                        data-file="{{ path }}/{{ item.namesmall }}"
                                                        title="修改">
                                                        <span class="fa-stack">
                                                            <i class="fa fa-square fa-stack-2x"></i>
                                                            <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
                                                        </span>
                                                    </a>
                                                    <a href="javascript:;"
                                                        class="table-link js-download-btn"
                                                        data-file="{{ path }}/{{ item.namesmall }}"
                                                        title="下载">
                                                        <span class="fa-stack">
                                                            <i class="fa fa-square fa-stack-2x"></i>
                                                            <i class="fa fa-download fa-stack-1x fa-inverse"></i>
                                                        </span>
                                                    </a>
                                                {% endif %}

                                                <a href="javascript:;"
                                                    class="table-link js-move-btn"
                                                    data-file="{{ path }}/{{ item.namesmall }}"
                                                    data-name="{{ item.namesmall }}"
                                                    title="移动">
                                                    <span class="fa-stack">
                                                        <i class="fa fa-square fa-stack-2x"></i>
                                                        <i class="fa fa-arrows fa-stack-1x fa-inverse"></i>
                                                    </span>
                                                </a>

                                                <a href="javascript:;"
                                                    class="table-link js-copy-btn"
                                                    data-file="{{ path }}/{{ item.namesmall }}"
                                                    data-name="{{ item.namesmall }}"
                                                    title="复制">
                                                    <span class="fa-stack">
                                                        <i class="fa fa-square fa-stack-2x"></i>
                                                        <i class="fa fa-copy fa-stack-1x fa-inverse"></i>
                                                    </span>
                                                </a>

                                                <a href="javascript:;"
                                                    class="table-link js-rename-btn"
                                                    data-file="{{ path }}/{{ item.namesmall }}"
                                                    data-name="{{ item.namesmall }}"
                                                    title="重命名">
                                                    <span class="fa-stack">
                                                        <i class="fa fa-square fa-stack-2x"></i>
                                                        <i class="fa fa-circle fa-stack-1x fa-inverse"></i>
                                                    </span>
                                                </a>

                                                <a href="javascript:;"
                                                    class="table-link danger js-delete-btn"
                                                    data-file="{{ path }}/{{ item.namesmall }}"
                                                    title="删除">
                                                    <span class="fa-stack">
                                                        <i class="fa fa-square fa-stack-2x"></i>
                                                        <i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>
                                                    </span>
                                                </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
{% endblock %}

{% block script %}
{{ block.Super }}

<script src='{{ assets("js/contextMenu/jquery.contextMenu.js") }}' type="text/javascript"></script>
<link href='{{ assets("js/contextMenu/jquery.contextMenu.css") }}' rel="stylesheet" type="text/css" />
<script type="text/javascript">
;(function($) {
    "use strict";

    $(".left-nav-file").addClass("active");
    
     $.contextMenu({
         selector: '.file-item-contextmenu',
         callback: function(key, options) {
             // $(this).find('.js-' + key + '-btn').trigger("click");
         },
         items: {
            "info": {
                name: "详情", 
                icon: "copy",
                callback: function(itemKey, opt, rootMenu, originalEvent) {
                    $(this).find('.js-info-btn').trigger("click");
                }
            },
            "sep": "---------",
            "rename": {
                name: "重命名", 
                icon: "edit",
                callback: function(itemKey, opt, rootMenu, originalEvent) {
                    $(this).find('.js-rename-btn').trigger("click");
                }
            },
            "delete": {
                name: "删除", 
                icon: "delete",
                callback: function(itemKey, opt, rootMenu, originalEvent) {
                    $(this).find('.js-delete-btn').trigger("click");
                }
            },
         }

     });

    // 删除
    $('.js-delete-btn').click(function() {
        var file = $(this).data("file");
        var url = "/file/delete";

        layer.confirm('您确定要删除吗？', {
            btn: ['确定', '取消']
        }, function(index){
            $.post(url, {
                file: file,
            }, function(data) {
                if (data.code == 0) {
                    layer.msg(data.message, {
                        icon: 1
                    });

                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                } else {
                    layer.msg(data.message, {
                        icon: 2
                    });
                }
            });
        });
    });

    // 详情
    $('.js-info-btn').click(function(e) {
        var file = $(this).data("file");
        var href = '/file/info?file=' + file;

        layer.open({
            type: 2,
            title: '详情',
            shadeClose: true,
            shade: 0.2,
            area: ['500px', '450px'],
            content: href,
        });
    });

    // 预览
    $('.js-preview-btn').click(function(e) {
        var type = $(this).data('type');
        var file = $(this).data('file');

        var url = '/file/preview-file?file=' + file;

        var preview = '';
        var height = '86%';
        if (type == 'image') {
            preview = '<img height="100%" src="' + url + '" />';
        } else if (type == 'video') {
            preview = '<video height="100%" controls src="' + url + '"></video>';
        } else if (type == 'audio') {
            height = 'auto';
            preview = '<audio controls src="' + url + '"></audio>';
        }

        layer.open({
            type: 1,
            area: ['auto', height],
            title: "预览",
            shadeClose: true,
            maxmin: true,
            shade: 0.2,
            end: function(index, layero) {
                return false;
            },
            content: '<div style="display: flex;align-items: center;justify-content: center;text-align: justify;height: 100%;">'+preview+'</div>',
        });
    });

    // 编辑文件
    $('.js-update-btn').click(function(e) {
        var file = $(this).data("file");
        var href = '/file/update-file?file=' + file;

        layer.open({
            type: 2,
            title: '编辑文件',
            shadeClose: true,
            maxmin: true,
            shade: 0.2,
            area: ['80%', '86%'],
            content: href,
        });
    });

    // 下载
    $('.js-download-btn').click(function(e) {
        var file = $(this).data("file");
        var href = '/file/download-file?file=' + file;

        window.open(href, '_blank');
    });

    // 创建文件夹
    $(".js-create-dir-btn").click(function() {
        var content = '';

        content += '<div style="padding: 25px 20px 10px 20px;"><input type="text" class="form-control" id="newDirName" placeholder="文件夹名称" value="new-dir"></div>';
        content += '<div style="padding: 5px 20px 10px 20px;"><button type="button" class="btn btn-success pull-right js-create-dir-save-btn">确认</button></div>';

        layer.open({
            type: 1,
            title: '创建文件夹',
            area: ['450px', '186px'], //宽高
            content: content,
        });

        return false;
    });

    // 创建文件夹保存
    $("body").on('click', '.js-create-dir-save-btn', function(e) {
        var dirName = $("#newDirName").val();
        var dir = "{{ path }}/" + dirName;

        var url = "/file/create-dir";

        $.post(url, {
            dir: dir,
        }, function(data) {
            if (data.code == 0) {
                layer.msg(data.message, {
                    icon: 1
                });

                setTimeout(function() {
                    location.reload();
                }, 2000);
            } else {
                layer.msg(data.message, {
                    icon: 2
                });
            }
        });
    });

    // 创建文件
    $(".js-create-file-btn").click(function() {
        var content = '';

        content += '<div style="padding: 25px 20px 10px 20px;"><input type="text" class="form-control" id="newFileName" placeholder="文件名称" value="new-file.txt"></div>';
        content += '<div style="padding: 5px 20px 10px 20px;"><button type="button" class="btn btn-success pull-right js-create-file-save-btn">确认</button></div>';

        layer.open({
            type: 1,
            title: '创建文件',
            area: ['450px', '186px'], //宽高
            content: content,
        });

        return false;
    });

    // 创建文件保存
    $("body").on('click', '.js-create-file-save-btn', function(e) {
        var fileName = $("#newFileName").val();
        var file = "{{ path }}/" + fileName;

        var url = "/file/create-file";

        $.post(url, {
            file: file,
        }, function(data) {
            if (data.code == 0) {
                layer.msg(data.message, {
                    icon: 1
                });

                setTimeout(function() {
                    location.reload();
                }, 2000);
            } else {
                layer.msg(data.message, {
                    icon: 2
                });
            }
        });
    });

    // 重命名
    $(".js-rename-btn").click(function() {
        var oldName = $(this).data('name');
        var content = '';

        content += '<div style="padding: 25px 20px 10px 20px;"><input type="text" class="form-control" id="newRenameName" data-name="' + oldName + '" placeholder="新名称" value="' + oldName + '"></div>';
        content += '<div style="padding: 5px 20px 10px 20px;"><button type="button" class="btn btn-success pull-right js-rename-save-btn">确认</button></div>';

        layer.open({
            type: 1,
            title: '重命名',
            area: ['450px', '186px'], //宽高
            content: content,
        });

        return false;
    });

    // 重命名保存
    $("body").on('click', '.js-rename-save-btn', function(e) {
        var oldName = $("#newRenameName").data('name');
        var newName = $("#newRenameName").val();

        var oldName = "{{ path }}/" + oldName;
        var newName = "{{ path }}/" + newName;

        var url = "/file/rename";

        $.post(url, {
            'old_name': oldName,
            'new_name': newName,
        }, function(data) {
            if (data.code == 0) {
                layer.msg(data.message, {
                    icon: 1
                });

                setTimeout(function() {
                    location.reload();
                }, 2000);
            } else {
                layer.msg(data.message, {
                    icon: 2
                });
            }
        });
    });

    // 移动
    $('.js-move-btn').click(function(e) {
        var file = $(this).data("file");
        var href = '/file/move?old=' + file;

        layer.open({
            type: 2,
            title: '移动',
            shadeClose: true,
            shade: 0.2,
            area: ['80%', '86%'],
            content: href,
        });
    });

    // 复制
    $('.js-copy-btn').click(function(e) {
        var file = $(this).data("file");
        var href = '/file/copy?old=' + file;

        layer.open({
            type: 2,
            title: '复制',
            shadeClose: true,
            shade: 0.2,
            area: ['80%', '86%'],
            content: href,
        });
    });

    // 上传
    $('.js-upload-btn').click(function(e) {
        var path = $(this).data("path");
        var href = '/file/upload?path=' + path;

        layer.open({
            type: 2,
            title: '上传',
            shadeClose: true,
            shade: 0.2,
            area: ['70%', '86%'],
            content: href,
        });
    });

    // 刷新
    $('.js-refresh-btn').click(function(e) {
        location.reload();
    });

})(jQuery);
</script>
{% endblock %}
